<template>
  <div>
    <el-header>
      <div>
        <span>共享画布</span>
      </div>
      <div>
        <el-button type="info" @click="goToPList">画板管理</el-button>
        <el-button type="info" @click="logout">退出</el-button>
      </div>
    </el-header>
    <div class="header2">
      <div class="main">
        <div class="main-left">
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
          <el-button type="success" icon="el-icon-check" circle></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click=""
          ></el-button>
        </div>
        <div class="main-right">
          <el-button round @click="addDialogVisible = true">新增画板</el-button>
          <el-button round>删除画板</el-button>
          <el-button round>编辑画板</el-button>
        </div>
      </div>
    </div>
    <el-main>
      <div class="mian-contents">
      <div class="center">
        <div class="contents-item" v-for="(item, index) in whiteboardsList">
          <div class="boardName">{{item.name}}</div>
          <div class="img" @click="intoEditDraw(item, index)"></div>
          <div class="text">
            <div class="left">
              <el-switch
                v-model="item.readOnly"
                @change="valueChange(item, index)"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </div>
            <div class="right">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteDraw(item)"
              ></el-button>
            </div>
          </div>
        </div>
      </div>
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page.sync="currentPage"
          :page-size="limit">
        </el-pagination>
    </div>
    
    </el-main>
  
    <el-dialog
      title="添加新的画板"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <!-- 内容主题区域 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
      >
        <el-form-item label="画板名称" prop="username">
          <el-input v-model="addName"></el-input>
        </el-form-item>

        <!-- <el-form-item label="是否直接可见" prop="username">
          <el-switch
            v-model="isSeeOther"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item> -->
        <el-form-item label="仅自己编辑" prop="username">
          <el-switch
            v-model="isEditOther"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNewDraw">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getNewDrawing,
  deleteDrawing,
  getAllDrawing,
  changeState,
} from "../../api/drawing.js";
export default {
  data() {
    return {
      /* 分页器数据 */
      limit:6, // 每页多少数据
      currentPage: 1, // 第几页
      total:0,// 总共多少数据

      userId: "",
      whiteboard_id: "",
      addForm: {},
      addName:'',
      whiteboardsList: [],

      addDialogVisible: false,

      isEditOther: true,
      isSeeOther: true,
    };
  },
  created() {
    this.userId = this.$store.state.currUserId;
    console.log(this.userId)
    this._getAllDrawing();
  },
  methods: {
    logout() {
      this.$router.push('/')

    },
    async _getAllDrawing() {
      let res = await getAllDrawing(this.userId, this.currentPage,this.limit);
     
      this.total = res.data.total
      this.whiteboardsList = res.data.whiteboards;
      this.$store.state.currUserWhiteboardsList = this.whiteboardsList;
    },
    async _getNewDrawing() {
      this.addDialogVisible = false
     
      await getNewDrawing(this.userId,this.addName).then((res) => {
       ;
      });

      this._getAllDrawing();
     
    },
    addNewDraw() {
      this._getNewDrawing();
    },
    intoEditDraw(item, index) {
     
      this.$router.push("/palatte/" + item._id + '/' + item.readOnly);
    },
    async valueChange(item) {
      
      await changeState(this.userId, item._id,item.readOnly)
    },
    async deleteDraw(item) {
      
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      
      if (confirmResult === "cancel") {
        return this.$message.info("已经取消了删除");
      }

      await deleteDrawing(this.userId, item._id).then((res) => {
       
      });
      this._getAllDrawing();
      this.$message.success("删除用户成功！");
    },
  },
  watch:{
    //监听页数变化
    currentPage(){
      this._getAllDrawing()
    }
  }
};
</script>

<style lang="less" scoped>
.el-header {
  background-color: black;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
  // height: 60px;
  div {
    display: flex;
    align-items: center;
  }
  span {
    margin-left: 15px;
  }
}

.header2 {
  width: 100%;
  height: 60px;
  margin-top: 5px;
  background-color: white;
  display: flex;
  justify-content: center;

  padding-left: 0;

  color: black;
  font-size: 20px;
  border-bottom: 3px #ebebeb solid;
  // height: 60px;
  .main {
    width: 78%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.mian-contents {
  width: 100%;
  margin-top: 3px;
  background: #f6f6f6;
  overflow: auto;
  display: flex;
  flex-flow: column nowrap;

  .center {
    margin: 0 auto;
    height: 700px;
    width: 79%;
    margin-top: 13px;
    background: #f6f6f6;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
    .contents-item {
      width: 30%;
      height: 300px;
      margin-top: 10px;
      margin-right: 15px;
      // background: black;
      border-radius: 3%;
      .boardName {
        width: 100%;
        // height: 10px;
        font-size: 20px;
        // background: red;
        background: #fff;
      }
      .img {
        width: 100%;
        height: 210px;
        background: #fff;
      }
      .text {
        height: 50px;
        margin-bottom: 10px;
        line-height: 50px;
        display: flex;
        background: black;
        color: white;
        justify-content: space-between;
        .left {
          margin-left: 15px;
        }
        .right {
          margin-right: 15px;
        }
      }
    }
  }
}
</style>